/** 
* 最近更新：2018/12/12
* 作者：wangyr
* 功能：tabs标签页开发 
*/

<template>
  <div v-cloak>
    <h1 class="titleCenter">tabs标签页开发</h1>
    <hr>
    <!-- 外面的框架tabs嵌套pane -->
    <tabs v-model="activeKey">
      <pane label="标签一" name="1">
        <ul>
          <li v-for="(item,index) in List" :key="item.id">
            <span>{{index}}</span>
            <span>{{item.name}}</span> ：
            <span>{{item.number}}</span>
          </li>
        </ul>
      </pane>
      <!-- 没有内容，子组件slot中内容会自动填上 -->
      <pane label="标签二" name="2">标签2的内容</pane>
      <pane label="标签三" name="3">标签3的内容</pane>
    </tabs>
  </div>
</template>


<script>
import tabs from '@/views/demo/tabPage/tabs'
import pane from '@/views/demo/tabPage/pane'
export default {
  // name: index,
  components: {
    tabs,
    pane
  },
  data () {
    return {
      activeKey: '1',
      List: [
        {
          name: '上海中医院',
          number: 20
        },
        {
          name: '上海医院',
          number: 44
        }
      ]
    }
  }
}
</script>


<style scoped>
.span > ul {
  float: right;
}
.pane > ul > li {
  border: 1px solid #9bb2c6;
  padding: 5px;
  margin-top: 10px;
  background: #e7effb;
  width: 40%;
  color: #3a5d75;
  float: left;
  margin-left: 20px;
}
li > span:nth-child(1) {
  font-weight: 700;
  padding-right: 5px;
}
li > span:nth-child(3) {
  color: #cea49c;
}
</style>
